<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
    <Card>
        <Form action="" method="get" name="exportList" id="exportList" enctype="multipart/form-data">
            <Card>
                <header>
                    <Row>
                        <span>姓名:</span>
                        <Input v-model="trialCostCondition.custName" style="width: 150px" name="custName" />
                        <span>身份证号:</span>
                        <Input v-model="trialCostCondition.custCardNo" style="width: 150px" name="custCardNo" />
                        <span>扣款订单号:</span>
                        <Input v-model="trialCostCondition.deductionOrderNumber" style="width: 150px" name="deductionOrderNumber" />
                        <span>扣款时间:</span>
                        <DatePicker type="date" style="width: 150px" v-model="trialCostCondition.withholdingBeginTime" name="withholdingBeginTime"></DatePicker>
                        <span>-</span>
                        <DatePicker type="date" style="width: 150px" v-model="trialCostCondition.withholdingEndTime" name="withholdingEndTime"></DatePicker>
                        <span>扣款申请时间:</span>
                        <DatePicker type="date" style="width: 150px" v-model="trialCostCondition.withholdingApplyBeginTime" name="withholdingApplyBeginTime"></DatePicker>
                        <span>-</span>
                        <DatePicker type="date" style="width: 150px" v-model="trialCostCondition.withholdingApplyEndTime" name="withholdingApplyEndTime"></DatePicker>
                    </Row>
                    <Row style="margin-top:20px">
                        <span>产品:</span>
                        <Select v-model="trialCostCondition.productType" style="width:150px" name="productType">
                            <Option v-for="item in productList" :value="item.productType" :key="item.productType">{{ item.productTypeName }}</Option>
                        </Select>
                        <span>扣款结果:</span>
                        <Select v-model="trialCostCondition.withholdingResult" style="width:150px" name="withholdingResult">
                            <Option v-for="item in withholdingResultList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                        <Button type="primary" @click="listQuery">查询</Button>
                        <Button type="primary" @click="downLoad">excel下载</Button>
                        <Button type="primary" @click="summary">征审费月汇总</Button>
                    </Row>
                </header>
            </Card>
        </Form>
        <Card>
            <Row type="flex" justify="center" align="middle" class="list-query">
                <Table :columns="orderColumns" :data="orderData" style="width: 100%;"></Table>
                <Table :columns="statisticsColumns" :data="statisticsData" style="width: 100%;" :show-header=false></Table>
            </Row>

            <div style="margin-top: 36px;text-align: center;">
                <Page :total="trialCostCondition.total" :current="trialCostCondition.pageNum" :page-size="trialCostCondition.pageSize" size="small" show-elevator show-total @on-change="pageChange"></Page>
            </div>
        </Card>
        <Modal v-model="modal1" title="下载条件设置" @on-ok="ok" @on-cancel="cancel" :scrollable="true">
            <Form ref="downForm" :model="trialCostSummary" :rules="rules" action="" method="get" name="exportSummary" id="exportSummary" enctype="multipart/form-data" inline>
                <FormItem label="代扣日期" style=" margin-left: 12%"></FormItem>
                <FormItem prop="withholdingBeginTime">
                    <DatePicker type="date" style="width: 150px" v-model="trialCostSummary.withholdingBeginTime" name="withholdingBeginTime"></DatePicker>
                </FormItem>
                <span>-</span>
                <FormItem prop="withholdingEndTime">
                    <DatePicker type="date" style="width: 150px" v-model="trialCostSummary.withholdingEndTime" name="withholdingEndTime"></DatePicker>
                </FormItem>
            </Form>
        </Modal>
    </Card>
</template>
<script>
const validateWithholdingBeginTime = (rule, value, callback) => {
  if (value === null || value === '') {
    callback(new Error('请输入代扣开始日期'))
  } else {
    callback()
  }
}
const validateWithholdingEndTime = (rule, value, callback) => {
  if (value === null || value === '') {
    callback(new Error('请输入代扣结束日期'))
  } else {
    callback()
  }
}
export default {
  name: 'mutative-router',
  data () {
    return {
      trialCostSummary: {
        withholdingBeginTime: '',
        withholdingEndTime: ''
      },
      modal1: false,
      trialCostCondition: {
        custName: null,
        custCardNo: null,
        deductionOrderNumber: null,
        withholdingBeginTime: null,
        withholdingEndTime: null,
        withholdingApplyBeginTime: null,
        withholdingApplyEndTime: null,
        productType: null,
        withholdingResult: null,
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      productList: [],
      withholdingResultList: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '0',
          label: '扣款中'
        },
        {
          value: '1',
          label: '已扣款'
        },
        {
          value: '2',
          label: '取消扣款'
        },
        {
          value: '3',
          label: '扣款失败'
        }
      ],
      orderColumns: [
        {
          type: 'index',
          title: '序号',
          align: 'center'
        },
        {
          title: '姓名',
          key: 'custName',
          align: 'center'
        },
        {
          title: '身份证',
          key: 'custCardNo',
          align: 'center'
        },
        {
          title: '手机号',
          key: 'mobileNum',
          align: 'center'
        },
        {
          title: '银行卡号',
          key: 'paymentBankCard',
          align: 'center'
        },
        {
          title: '开户行',
          key: 'paymentBankName',
          align: 'center'
        },
        {
          title: '产品',
          key: 'productTypeName',
          align: 'center'
        },
        {
          title: '产品期限',
          key: 'applyTerms',
          align: 'center'
        },
        {
          title: '渠道',
          key: 'channelType',
          align: 'center'
        },
        {
          title: '扣款订单号',
          key: 'orderNumber',
          align: 'center'
        },
        {
          title: '扣款时间',
          key: 'updatedDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h(
                'span',
                vm.$util.loanModularFormatTime(params.row.updatedDate)
              )
            ])
          }
        },
        {
          title: '收取金额',
          key: 'amount',
          align: 'center'
        },
        {
          title: '状态',
          key: 'state',
          align: 'center',
          render: (h, params) => {
            if (params.row.state === '0') {
              return h('span', {}, '扣款中')
            }
            if (params.row.state === '1') {
              return h('span', {}, '已扣款')
            }
            if (params.row.state === '2') {
              return h('span', {}, '取消扣款')
            }
            if (params.row.state === '3') {
              return h('span', {}, '扣款失败')
            }
          }
        },
        {
          title: '详细结果',
          key: 'retMsg',
          align: 'center'
        }
      ],
      orderData: [],
      statisticsColumns: [
        {
          title: '合计',
          key: 'title',
          align: 'center'
        },
        {
          key: 'custName',
          align: 'center'
        },
        {
          key: 'custCardNo',
          align: 'center'
        },
        {
          key: 'custName',
          align: 'center'
        },
        {
          key: 'mobile',
          align: 'center'
        },
        {
          key: 'bankCardNo',
          align: 'center'
        },
        {
          key: 'openingBankName',
          align: 'center'
        },
        {
          key: 'productName',
          align: 'center'
        },
        {
          key: 'term',
          align: 'center'
        },
        {
          key: 'channelCodeName',
          align: 'center'
        },
        {
          key: 'deductionOrderNumber',
          align: 'center'
        },
        {
          key: 'deductionTime',
          align: 'center'
        },
        {
          key: 'totalAmount',
          align: 'center'
        },
        {
          key: 'status',
          align: 'center'
        },
        {
          key: 'detailResult',
          align: 'center'
        }
      ],
      statisticsData: [{ title: '合计', totalAmount: 0, status: '已扣款' }],
      rules: {
        withholdingBeginTime: [
          {
            validator: validateWithholdingBeginTime,
            trigger: 'blur'
          }
        ],
        withholdingEndTime: [
          {
            validator: validateWithholdingEndTime,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    var vm = this
    var tmpDate = new Date()
    var tmpEndDate = new Date()
    tmpEndDate.setDate(tmpEndDate.getDate())
    vm.trialCostCondition.withholdingApplyEndTime = tmpEndDate
    tmpDate.setDate(tmpDate.getDate() - 7)
    vm.trialCostCondition.withholdingApplyBeginTime = tmpDate
    this.screenConditon()
    // this.listQuery()
  },

  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.trialCostCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.trialCostCondition.pageSize = pageLength
      vm.listQuery()
    },
    listQuery () {
      var vm = this
      this.$ajax
        .post(
          this.$appContext.marvels_core_financial +
                    'financial/loan/balanceAccount/service/trialCostList',
          vm.trialCostCondition
        )
        .then(re => {
          var data = re.data
          vm.orderData = data.data.list || []
          vm.trialCostCondition.total = data.data.total
          var dataList = []
          dataList.push({
            title: '合计',
            totalAmount: data.data.totalAmount,
            status: '已扣款'
          })
          this.statisticsData = dataList
        })
        .catch(er => { })
    },
    screenConditon () {
      var vm = this
      this.$ajax
        .post(this.$appContext.marvels_core_product + 'product/api/mcptProductTypeInfo', {}).then(re => {
          var data = re.data
          vm.productList.push({ productType: '', productTypeName: '请选择' })
          var productLength = 0
          for (; productLength < data.length; productLength++) {
            vm.productList.push(data[productLength])
          }
        })
        .catch(er => { })
    },
    summary () {
      var vm = this
      vm.trialCostSummary.withholdingBeginTime = null
      vm.trialCostSummary.withholdingEndTime = null
      vm.modal1 = true
    },
    downLoad () {
      document.getElementById('exportList').action =
                this.$appContext.marvels_core_financial +
                'financial/loan/balanceAccount/service/downLoadTrialCost'
      document.getElementById('exportList').submit()
    },
    ok () {
      // 下载
      this.$refs.downForm.validate(valid => {
        if (valid) {
          document.getElementById('exportSummary').action =
                        this.$appContext.marvels_core_financial +
                        'financial/loan/balanceAccount/service/downLoadTrialCostSummary'
          document.getElementById('exportSummary').submit()
        }
      })
    },
    cancel () {
      // this.$Message.info('Clicked cancel')
    }
  }
}
</script>
